<template>
    <div>
        <el-tree 
            :data="treeData1" 
            ref="tree1" 
            class="tree" 
            node-key="id" 
            draggable 
            default-expand-all 
            :check-on-click-node="false"
		>
            <template #default="{ node, data }">
                <span class="custom-tree-node" >
                    <span class="treeLabel" :id="data.id" @drop="drop_handler" @dragover="dragover_handler">{{ node.label }}</span>
                </span>
            </template>
		</el-tree>
        <el-tree 
            :data="treeData2" 
            ref="tree2" 
            class="tree" 
            node-key="id" 
            default-expand-all 
            :check-on-click-node="false"
		>
            <template #default="{ node, data }">
                <span class="custom-tree-node" >
                    <span class="treeLabel" :id="data.id" draggable="true" @dragstart="dragStart">{{ node.label }}</span>
                </span>
            </template>
		</el-tree>
    </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, reactive, Ref, ref,defineEmits } from 'vue'
import type Node from 'element-plus/es/components/tree/src/model/node'
import type { DragEvents } from 'element-plus/es/components/tree/src/model/useDragNode'
import type { NodeDropType } from 'element-plus/es/components/tree/src/tree.type'
import { ElTree } from 'element-plus'

export default defineComponent({
    name: 'oneTwo',
    setup(props,ctx) {
		const tree1:any = ref<InstanceType<typeof ElTree>>()
		const tree2:any = ref<InstanceType<typeof ElTree>>()
		onMounted(()=>{
			console.log(tree2.value,'valuetrre2')
            console.log(tree2.value.getCheckedNodes(),'=============')
		})
        
        const treeData1 = [{
            id: 1,
            label: "一级 1111111111111111111",
            children: [{
                id: 4,
                label: "二级 111111111111-1",
                children: [{ id: 9, label: "三级 111111111111-1-1" }]
            }],
        }]
        const treeData2 = [{
            id: 2,
            label: "一级 2222222222222",
            children: [{
                id: 5,
                label: "二级 22222222222222222-1",
                children: [{ id: 8, label: "三级 2222222222222222-1-1" }],
            }],
        }]

        const dragStart=(ev:any) => {
            console.log(ev,'evefvev');
            
            ev.dataTransfer.dropEffect="copy";
            ev.dataTransfer.setData("text/plain",ev.target.id);
        }



        const dragover_handler=(ev:any)=> {
            ev.preventDefault();
            ev.dataTransfer.dropEffect="link";
        }

        const drop_handler=(ev:any)=> {
            ev.preventDefault();

            let outId=ev.dataTransfer.getData("text/plain");
            let inId=ev.target.id

            // 获取拖拽节点
            let outNode=tree2.value!.getNode(Number(outId))
            tree1.value.append(outNode.data,Number(inId))
        }

        return {
            treeData1,
            treeData2,
			tree1,
			tree2,
            dragStart,
            drop_handler,
            dragover_handler
        }
    }
})
</script>

<style scoped>
.tree {
	margin-top: 100px;
    display: inline-block;
    vertical-align: top;
    width: 30%;
    height: 400px;
    border:  solid pink;
}
</style>



